import { PageContainer } from '@ant-design/pro-layout';
import {Button, message} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import {getUserGroup,UpdateUserGroup,addUserGroup} from "@/services/ant-design-pro/users";
import ProTable, {ActionType} from '@ant-design/pro-table';
import ProForm, {ModalForm, ProFormText} from "@ant-design/pro-form";
import {useRef, useState} from "react";
import Delete from './deleteModal'


const UserGroup = () => {
  const actionRef = useRef<ActionType>();
  const [modifyForm,setModifyForm] = useState('')
  const [modifyFormData,setModifyFormData] = useState('')
  const [editId,setEditId] = useState(undefined)

  // 添加或者编辑的描述文字
  const type = editId === undefined ? '添加' : '编辑';

  // 编辑或添加列表
  const modify=(record)=>{
    console.log(record)
    setModifyForm(true)
    setModifyFormData(record.nickname)
    setEditId(record.id)
  }

  const columns = [
    {
      title: 'ID',
      width: 80,
      dataIndex: 'id',
    },
    {
      title: '分组名称',
      width: 80,
      dataIndex: 'nickname',
    },
    {
      title: '操作',
      width: 180,
      key: 'option',
      valueType: 'option',
      render: (_,record) => {
        const [userDelete,setUserDelete] = useState(false)
        // 删除用户等级列表
        const deleteUser=(record)=>{
          setUserDelete(true)
        }
        return [
          <a key="link" onClick={()=>{
            modify(record)
            // console.log(record)
          }}>修改</a>,
          <a key="link1"
             onClick={()=>{deleteUser(record)}}
          >
            删除等级
            <Delete
              ID={record.id}
              actionRef={actionRef}
              setUserDelete={setUserDelete}
              userDelete={userDelete}
            />
          </a>,
        ]
      },
    }]

  return (
    <PageContainer>
      <ProTable
        actionRef={actionRef}
        columns={columns}
        request={async (params, sort, filter)=>{
          const {data,meta} = await getUserGroup({...params, ...sort, ...filter})
          return {
            data,
            success:true,
            total:meta.pagination.total
          }
        }}
        rowKey="id"
        search={false}
        dateFormatter="string"
        toolBarRender={() => [
          <Button key="button" icon={<PlusOutlined />} type="primary" onClick={modify}>
            添加分组
          </Button>,
        ]}
      />
      <ModalForm
        title={`${type}分组`}
        submitter={false}
        visible={modifyForm}
        destroyOnClose={true}
        onVisibleChange={setModifyForm}
      >
        <ProForm
          onFinish={async (values)=>{

            setModifyForm(false)
            if (editId === undefined){
              await addUserGroup({...values})
              message.success('添加成功！')
            }else {
              await UpdateUserGroup(editId,{...values})
              message.success('修改成功！')
            }

            actionRef.current?.reload();
          }}
        >
          <ProFormText
            label='分组名称'
            name='nickname'
            initialValue={modifyFormData}
            rules={[{required:true}]}
          />
        </ProForm>
      </ModalForm>

    </PageContainer>
  );
};

export default UserGroup;
